<template>
	<view>
		<view class="item" :class="{last0: lastBottom}" v-for="(item,index) in arryArticle" :key="index" @click="toDetail(item.id)">
			<image class="img" :src="item.litpic" mode="aspectFill"></image>
			<view class="info">
				<view class="item-title">{{item.title}}</view>
				<view class="detail">{{item.description}}</view>
				<view class="shownum-commentNum">
					<view class="shownum"><text class="iconfont">&#xe62b;</text>{{item.shownum}}</view>
					<view class="commentNum"><text class="iconfont">&#xe625;</text>{{item.comment_num}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 攻略列表项
	 * @property {Number} 
	 * @property {Number} 
	 */
	export default {
		name: 'stStrategyItem',
		props: {
			lastBottom: {
				type: Boolean,
				default: false
			},
			arryArticle:{
				type: Array,
				default:[]
			},
			info: {
				type: Object,
				default: ()=>{return{}}
			},
		},
		data() {
			return {
				
			};
		},
		methods:{
			toDetail(id){
				this.$emit('toDetail', id)
			}
		},
	}
</script>

<style lang="scss">
	
	.item{
		@extend .displayflex;
		margin-bottom: 20rpx;
		&.last0{
			&:last-child{
				margin-bottom: 0;
			}
		}
	}
	.img{
		width: 280rpx;
		height: 198rpx;
		margin-right: 20rpx;
	}
	.info{
		@extend .displayflex;
		flex: 1;
		flex-direction:column;
		justify-content: space-around;
		width: 350rpx;
	}
	.item-title{
		@extend .ellipses;
		margin-bottom: 6rpx;
		line-height: 1.5;
		font-size: $uni-font-size-base;
	}
	.detail{
		@extend .ellipses;
		line-height: 1.375;
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
	}
	.shownum-commentNum{
		@extend .displayflex;
		font-size: 22rpx;
		color: #bbb;
		.iconfont{
			position: relative;
			height: 30rpx;
			margin-right: 10rpx;
			overflow: hidden;
		}
	}
	.shownum{
		margin-right: 32rpx;
		.iconfont{
			top: 4rpx;
			font-size: 34rpx;
		}	
	}
	.commentNum{
		.iconfont{
			top: 8rpx;
			font-size: 28rpx;
		}	
	}
</style>
